<template>
  <div class="page-sty">
    <div class="wr-bg">
      <div class="content">
        <img src="@/assets/images/logo/logo_write.png" class="logo-sty" @click="backHome()" alt="">
        <div class="top-content">
          <div class="left">
            <img src="../images/tit_text.png" class="text-img" alt="">
            <div class="rect">
              <div class="rect-bg"></div>
              <div class="rect-content">
                <div class="rect-head">
                  <Divider class="divider">
                    <div class="title">
                      <img src="../images/star_left.png" class="title-star" alt="">
                      <div class="title-text">{{ $t('personal.invitedUsers') }}</div>
                      <img src="../images/star_right.png" class="title-star" alt="">
                    </div>
                  </Divider>
                </div>
                <div class="pink-content">
                  <div class="win-tit">
                    <img src="@/assets/images/promote/coin.png" class="coin-icon" alt="">
                    <span class="get-info" v-if="progress === 100 || progress > 100" v-html="formattedFreeText"></span>
                    <span class="get-info" v-else v-html="formattedText"></span>
                  </div>
                  <div class="progress-content">
                    <div class="progress">
                      <!-- 用于显示进度值的元素 -->
                      <div class="progress-value" :style="{ left: calculatedLeft + '%', top: calculatedTop }">{{
                        progress > 100 ? 100 : progress }}%
                      </div>
                      <div class="progress-sty">
                        <div class="progress-container">
                          <!-- 进度条填充 -->
                          <div class="progress-bar" :style="{ width: progress + '%', borderRadius: calculatedRadius }">
                          </div>
                        </div>
                        <div class="gift-sty"
                          :style="{ background: progress === 100 || progress > 100 ? '#FFD101' : '' }">
                          <img src="../images/gift.png" v-if="progress < 100" class="gift-icon" alt="">
                          <img src="../images/full_prize.png" v-else class="gift-icon" alt="">
                        </div>
                      </div>
                      <div class="prize-end">{{ $t('activity.free_shipping_text') }}</div>
                    </div>
                  </div>
                </div>
                <div class="invite-info" v-html="formattedInvite"></div>
                <div class="invite-user">
                  <div class="user-info">
                    <img :src="calculatedImg(item.inviteOperateType)" v-for="(item, index) in userVOList" :key="index"
                      class="user-img" alt="">
                  </div>
                </div>
                <div class="invite-user">
                  <div class="invite-btn" @click="shareBtn()">{{ $t('personal.invitedUsers') }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <lucky-draw :totalLottery="totalLottery" :prizes="prizes" :activityId="activityId"
              @resultChange="resultChange" @getCount="getCount" @isEnable="isEnableMet"></lucky-draw>
          </div>
        </div>
        <div class="body-content">
          <Row :gutter="32">
            <Col span="12">
            <div class="write-rect">
              <div class="title-text">{{ $t('activity.friend_list') }}</div>
              <!-- 加载中 -->
              <div class="loading-sty" v-if="userLoading">
                <t-loading></t-loading>
              </div>
              <!-- 列表数据 -->
              <div class="list-sty" v-if="userArr.length > 0">
                <div class="list-info" v-for="(item, index) in userArr" :key="index">
                  <div class="left">
                    <div class="name">{{ formatUserName(item.userName) }}</div>
                    <div class="email">{{ formatEmail(item.email) }}</div>
                  </div>
                  <div class="right">
                    <div class="status"
                      :style="{ color: item.operateType == 'ORDER_PURCHASED' ? '#FF186B' : '#333333' }">{{
                        calculatedType[item.operateType] || '' }}</div>
                  </div>
                </div>
              </div>
              <!-- 空状态 -->
              <div class="empty-sty" v-if="userArr.length === 0">
                <img src="@/assets/images/empty/empty_prize.png" class="un-data" alt="">
              </div>
            </div>
            </Col>
            <Col span="12">
            <div class="write-rect">
              <div class="title-text">{{ $t('activity.prize_record') }}</div>
              <!-- 加载中 -->
              <div class="loading-sty" v-if="recordLoading">
                <t-loading></t-loading>
              </div>
              <!-- 列表数据 -->
              <div class="list-sty" v-if="recordArr.length > 0">
                <div class="list-info" v-for="(item, index) in recordArr" :key="index">
                  <div class="left">
                    <div class="name">{{ formatUserName(item.userName) }}</div>
                    <div class="email">{{ item.rewardTime }}</div>
                  </div>
                  <div class="right">
                    <div class="status" v-if="item.rewardExpressFee">{{ $t('activity.free_shipping_text') }}!</div>
                    <div class="status" v-else>
                      +{{ item.rewardGoldCoins }}
                      <img src="@/assets/images/promote/coin.png" class="coin-img" alt="">
                    </div>
                  </div>
                </div>
              </div>
              <!-- 空状态 -->
              <div class="empty-sty" v-if="recordArr.length === 0">
                <img src="@/assets/images/empty/empty_prize.png" class="un-data" alt="">
              </div>
            </div>
            </Col>
          </Row>
        </div>
        <div class="footer-content">
          <div class="at-dc" v-if="dataInfo.ruleContent" v-html="dataInfo.ruleContent.content"></div>
        </div>
      </div>
    </div>
    <!-- 复制分享链接 -->
    <share-count ref="copeRef" :textVal="textVal" :activityCode="dataInfo.activityCode"></share-count>
    <!-- 抽奖结束显示结果弹窗 -->
    <raffle-results ref="resultRef"></raffle-results>
    <!-- 没资格弹窗 -->
    <result-draw-pop ref="unJoinRef"></result-draw-pop>
  </div>
</template>
<script>
import luckyDraw from "../components/lucky-draw.vue";
import shareCount from "@/views/main/commponents/share-count.vue";
import raffleResults from "../components/raffle-results.vue";
import resultDrawPop from "../components/result-draw-pop.vue";
import { lotteryDetail, getActivityDetail, getGoldRecord, getInviteUser } from "@/api/expressOrder";
export default ({
  components: { luckyDraw, shareCount, raffleResults, resultDrawPop },
  data() {
    return {
      userLoading: false,
      recordLoading: false,
      dataInfo: {},
      progress: 0,
      userVOList: [
        { inviteOperateType: 'WAIT_INVITE' },
        { inviteOperateType: 'WAIT_INVITE' },
        { inviteOperateType: 'WAIT_INVITE' },
        { inviteOperateType: 'WAIT_INVITE' },
      ],
      invitedImg: require('../images/on_user.png'),
      unInvitedImg: require('../images/un_user.png'),
      userArr: [],
      recordArr: [],
      calculatedType: {
        'USER_REGISTER': this.$t('activity.order_status_registered'),
        'ORDER_PAY': this.$t('activity.buy_end_status'),
        'ORDER_PURCHASED': this.$t('activity.order_status_buy'),
        'ORDER_RETURN': this.$t('activity.return_order_goods')
      },
      textVal: this.$t('activity.activity_invite_tip'),
      activityInfo: {},
      prizes: [],
      ruleContent: {},
      activityId: '',
      totalLottery: '',
      freeText: this.$t('activity.free_shipping_text'),
      isEnable: true
    }
  },
  created() {
    if (this.$route.query.acId) {
      this.activityId = this.$route.query.acId;
      this.getActivity(this.$route.query.acId);
      this.getDetail(this.$route.query.acId);
      this.getUser(this.$route.query.acId);
      this.getRecord(this.$route.query.acId);
    }
  },
  computed: {
    formattedText() {
      return this.$t('activity.free_shipping_text1', { num: this.dataInfo.totalGold });
    },
    formattedFreeText() {
      return this.$t('activity.free_text_desc', { text: this.freeText })
    },
    formattedInvite() {
      return this.$t('activity.free_shipping_text2', { size: this.dataInfo.inviteUserNum });
    },
    calculatedLeft() {
      // 这里设置一个阈值，当进度值小于这个阈值时，不进行偏移量的计算
      const threshold = 19;
      if (this.progress > threshold && this.progress < 100) {
        return this.progress - 5; // 当进度值大于阈值时，减去一个偏移量
      }
      if (this.progress === 100 || this.progress > 100) {
        return this.progress - 7;
      }
      return this.progress;
    },
    calculatedTop() {
      if (this.progress < 100) {
        return '-8px';
      }
      return '-20px';
    },
    calculatedRadius() {
      if (this.progress < 100) {
        return '10px';
      }
      return '10px 0 0 10px';
    }
  },
  methods: {
    backHome() {
      this.$router.push('/');
    },
    getActivity(id) {
      lotteryDetail(id).then((res) => {
        this.activityInfo = res.result;
        if (res.result.rewardConfig) {
          let newList = res.result.rewardConfig;
          this.prizes = newList.map((v, i) => {
            let background = i % 2 === 1 ? '#FFCFD6' : '#FFF8FA';
            return {
              fonts: [
                {
                  text: v.rewardName,
                  fontSize: '20',
                  top: '22%',
                  fontWeight: 'Bold',
                  fontColor: '#FF1C71',
                  fontStyle: 'Roboto'
                }
              ],
              rewardIndex: v.rewardIndex,
              background: background
            }
          });
        }
        // 规则内容
        this.ruleContent = res.result.ruleContent;
      })
    },
    getDetail(id) {
      getActivityDetail(id).then((res) => {
        this.dataInfo = res.result;
        this.totalLottery = this.dataInfo.totalLotteryDraw - this.dataInfo.usedLotteryDraw;//剩余次数
        this.progress = (res.result.currentProgress === 100 || res.result.currentProgress > 100) ? 100 : res.result.currentProgress;//进度值
        if (res.result.userVOList && res.result.userVOList.length > 0) {
          res.result.userVOList.forEach((item, index) => {
            if (index < 4) {
              this.userVOList[index] = item;
            }
          });
        }
        // joinActivity为false，则说明没资格参加此次活动
        if (!res.result.joinActivity) {
          this.$refs.unJoinRef.open({ type: 'joinActivity' });
        }
      })
    },
    getUser(id) {
      getInviteUser(id).then((res) => {
        this.userArr = res.result;
      })
    },
    getRecord(id) {
      getGoldRecord(id).then((res) => {
        this.recordArr = res.result;
      })
    },
    calculatedImg(inviteOperateType) {
      if (inviteOperateType === 'INVITE_SUCCESS') {
        return this.invitedImg;
      } else {
        return this.unInvitedImg;
      }
    },
    formatUserName(name) {
      if (name.length <= 3) {
        return name;
      }
      return name.slice(0, 2) + "**" + name.slice(-1);
    },
    formatEmail(email) {
      const [localPart, domainPart] = email.split('@');
      if (localPart.length <= 2) {
        return email;
      }
      return localPart[0] + "**" + localPart.slice(-1) + "@" + domainPart;
    },
    shareBtn() {
      if (!this.isEnable) { return }
      this.$refs.copeRef.open();
    },
    resultChange(res) {
      if (res.result === 'SUCCESS' || res.result === 'SUCCESS_NOT_FULL' || res.result === 'SUCCESS_FULL') {
        this.totalLottery = res.totalLotteryDraw - res.usedLotteryDraw;//抽奖后更新剩余次数
        this.progress = (res.currentProgress === 100 || res.currentProgress) > 100 ? 100 : res.currentProgress;//抽奖后更新进度
        this.getRecord(res.activityId);//抽奖后更新奖励记录
      }
    },
    getCount() {
      this.$refs.copeRef.open();
    },
    isEnableMet(val) {
      this.isEnable = val;//是否抽奖中，抽奖中禁用操作
    }
  }
})
</script>

<style lang="less" scoped>
.page-sty {
  width: 100%;
  background: #FF649D;

  .wr-bg {
    width: 100%;
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 3193px;

    .content {
      padding: 46px 120px 120px 80px;

      .logo-sty {
        width: 166px;
        cursor: pointer;
        margin-bottom: 44px;
      }

      .top-content {
        margin-left: 40px;
        display: flex;

        .left {
          .text-img {
            width: 793px;
            height: 204px;
            margin-bottom: 40px;
          }

          .rect {
            width: 710px;
            height: 600px;
            padding-bottom: 24px;
            background: #FFFFFF;
            border-radius: 24px;
            position: relative;

            &-bg {
              width: 100%;
              height: 170px;
              background-image: url('../images/rect_bg.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }

            &-content {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              padding: 32px;

              .rect-head {
                min-width: 540px;
                max-width: 540px;
                margin: 0 auto;

                :deep(.ivu-divider-with-text-center:before) {
                  border-top: 1px solid #FFC7BB;
                }

                :deep(.ivu-divider-with-text-center:after) {
                  border-top: 1px solid #FFC7BB;
                }

                .divider {

                  .title {
                    display: flex;
                    align-items: center;

                    &-star {
                      width: 20px;
                      height: 20px;
                    }

                    &-text {
                      font-weight: 600;
                      font-size: 24px;
                      color: #8E042B;
                      line-height: 28px;
                      margin-left: 20px;
                      margin-right: 20px;
                    }
                  }
                }
              }

              .pink-content {
                width: 100%;
                min-height: 188px;
                background: linear-gradient(177deg, #FFEAEC 0%, #FEF2F2 100%);
                border-radius: 14px;
                padding: 30px 24px;

                .win-tit {
                  display: flex;
                  align-items: center;
                  gap: 8px;

                  .coin-icon {
                    width: 24px;
                    height: 24px;
                  }

                  .get-info {
                    font-weight: 500;
                    font-size: 22px;
                    color: #1E1714;
                    line-height: 26px;

                    :deep(span) {
                      color: #FF186B;
                    }
                  }
                }

                .progress-content {
                  display: block;
                  margin-top: 38px;
                  margin-right: 25px;

                  .progress {
                    width: 100%;
                    margin-top: 20px;
                    position: relative;

                    /* 进度值 */
                    .progress-value {
                      position: absolute;
                      top: -20px;
                      left: 0;
                      width: 100%;
                      font-weight: 600;
                      font-size: 16px;
                      color: #FF186B;
                      line-height: 19px;
                    }

                    .progress-sty {
                      width: 100%;
                      display: flex;
                      align-items: center;

                      .progress-container {
                        flex: 1;
                        width: 100%;
                        height: 14px;
                        background-color: #FFE1E6;
                        border-radius: 10px 0 0 10px;

                        /* 进度条填充样式 */
                        .progress-bar {
                          height: 100%;
                          background-color: #FF4E8F;
                          border-radius: 10px 0 0 10px;
                        }
                      }

                      .gift-sty {
                        width: 42px;
                        height: 42px;
                        background: #FFE1E6;
                        border-radius: 50%;
                        margin-left: -4px;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .gift-icon {
                          width: 28px;
                          height: 28px;
                        }
                      }
                    }

                    .prize-end {
                      font-weight: 600;
                      font-size: 16px;
                      color: #FF186B;
                      line-height: 19px;
                      text-align: right;
                      margin-top: 8px;
                    }
                  }
                }
              }

              .invite-info {
                font-weight: 400;
                font-size: 20px;
                color: #767B93;
                line-height: 23px;
                margin-top: 24px;

                :deep(span) {
                  color: #FF186B;
                }
              }

              .invite-user {
                display: flex;
                justify-content: center;
                margin-top: 40px;

                .user-info {
                  display: flex;
                  align-items: center;
                  gap: 56px;

                  .user-img {
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                  }
                }

                .invite-btn {
                  width: 472px;
                  height: 74px;
                  background: #FF186B;
                  border-radius: 40px 40px 40px 40px;
                  font-weight: 400;
                  font-size: 28px;
                  color: #FFFFFF;
                  line-height: 74px;
                  text-align: center;
                  cursor: pointer;
                }
              }
            }
          }
        }

        .right {
          margin-top: 24px;
          margin-left: 200px;
        }
      }

      .body-content {
        margin-top: 32px;
        margin-left: 40px;

        .write-rect {
          width: 100%;
          height: 492px;
          padding: 32px 40px;
          background: #FFFFFF;
          border-radius: 20px;

          .title-text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24px;
            color: #1E1714;
            line-height: 28px;
          }

          .loading-sty {
            height: 420px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .list-sty {
            height: 420px;
            overflow: auto;

            .list-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-bottom: 24px;
              border-bottom: 1px solid #E9EAF3;
              margin-top: 24px;

              .left {
                .name {
                  font-weight: 500;
                  font-size: 20px;
                  color: #1E1714;
                  line-height: 23px;
                }

                .email {
                  font-weight: 400;
                  font-size: 20px;
                  color: #AEB0B9;
                  line-height: 23px;
                  margin-top: 8px;
                }
              }

              .right {
                font-weight: 500;
                font-size: 20px;
                color: #FF186B;
                line-height: 23px;

                .status {
                  font-weight: 500;
                  font-size: 20px;
                  color: #FF186B;
                  line-height: 23px;
                  display: inline-flex;
                  align-items: flex-start;
                  gap: 8px;

                  .coin-img {
                    width: 20px;
                    height: 20px;
                  }
                }
              }
            }

            .list-info:first-child {
              margin-top: 32px;
            }

            .list-info:last-child {
              border: none;
            }
          }

          .list-sty::-webkit-scrollbar {
            display: none;
          }

          .empty-sty {
            height: 420px;
            display: flex;
            justify-content: center;
            align-items: center;

            .un-data {
              width: 260px;
            }
          }
        }
      }

      .footer-content {
        margin-top: 45px;
        margin-left: 40px;

        .at-dc {
          font-weight: 500;
          font-size: 16px;
          color: #FFFFFF;
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
